<template>
  <el-dialog
    :model-value="visible"
    title="数据格式详情"
    width="800px"
    :before-close="handleClose"
    append-to-body
  >
    <div v-if="data" class="detail-content">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="数据格式ID">
          {{ data.dataformatId || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="数据格式名称">
          {{ data.name || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="请求方式">
          <el-tag :type="getRequestMethodType(data.requestType)">
            {{ data.requestType || '-' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="通信方向">
          <el-tag :type="getCommunicationDirectionType(data.direction)">
            {{ getCommunicationDirectionText(data.direction) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="消息类型">
          <el-tag :type="getMessageTypeType(data.messageType)">
            {{ getMessageTypeText(data.messageType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="数据格式类型">
          <el-tag :type="getDataFormatTypeType(data.dataformatType)">
            {{ getDataFormatTypeText(data.dataformatType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="功能码/方法名">
          {{ data.command || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="是否测试通过">
          <el-tag :type="data.testStatus === 1 ? 'success' : 'danger'">
            {{ data.testStatus === 1 ? '是' : '否' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="data.status === 1 ? 'success' : 'danger'">
            {{ data.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="协议ID">
          {{ data.protocolId || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ data.createTime || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ data.updateTime || '-' }}
        </el-descriptions-item>
      </el-descriptions>
      
      <el-descriptions v-if="data.remark" :column="1" border class="mt-4">
        <el-descriptions-item label="备注">
          {{ data.remark }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    
    <div v-else class="no-data">
      <el-empty description="暂无数据" />
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type { DataFormatInfo } from '@/api/IOT/protocolManage/dataFormatManage/types'

// Props定义
interface Props {
  visible: boolean
  data?: DataFormatInfo
}

const props = defineProps<Props>()

// Emits定义
interface Emits {
  'update:visible': [value: boolean]
}

const emit = defineEmits<Emits>()

// 工具函数 - 获取请求方式标签类型
const getRequestMethodType = (method?: string) => {
  const typeMap: Record<string, string> = {
    'GET': 'success',
    'POST': 'primary',
    'PUT': 'warning',
    'DELETE': 'danger'
  }
  return typeMap[method || ''] || 'info'
}

// 工具函数 - 获取通信方向标签类型和文本
const getCommunicationDirectionType = (direction?: number) => {
  const typeMap: Record<number, string> = {
    0: 'primary',
    1: 'success'
  }
  return typeMap[direction ?? -1] || 'info'
}

const getCommunicationDirectionText = (direction?: number) => {
  const textMap: Record<number, string> = {
    0: '请求',
    1: '响应'
  }
  return textMap[direction ?? -1] || '-'
}

// 工具函数 - 获取消息类型标签类型和文本
const getMessageTypeType = (type?: string) => {
  const typeMap: Record<string, string> = {
    'request': 'primary',
    'response': 'success',
    'notification': 'warning'
  }
  return typeMap[type || ''] || 'info'
}

const getMessageTypeText = (type?: string) => {
  const textMap: Record<string, string> = {
    'request': '请求',
    'response': '响应',
    'notification': '通知'
  }
  return textMap[type || ''] || '-'
}

// 工具函数 - 获取数据格式类型标签类型和文本
const getDataFormatTypeType = (type?: string) => {
  const typeMap: Record<string, string> = {
    'json': 'success',
    'xml': 'primary',
    'binary': 'warning',
    'text': 'info'
  }
  return typeMap[type || ''] || 'info'
}

const getDataFormatTypeText = (type?: string) => {
  const textMap: Record<string, string> = {
    'json': 'JSON',
    'xml': 'XML',
    'binary': '二进制',
    'text': '文本'
  }
  return textMap[type || ''] || '-'
}

// 工具函数 - 获取数据解析方式标签类型和文本
const getDataParsingMethodType = (method?: string) => {
  const typeMap: Record<string, string> = {
    'auto': 'success',
    'manual': 'warning',
    'script': 'primary'
  }
  return typeMap[method || ''] || 'info'
}

const getDataParsingMethodText = (method?: string) => {
  const textMap: Record<string, string> = {
    'auto': '自动解析',
    'manual': '手动解析',
    'script': '脚本解析'
  }
  return textMap[method || ''] || '-'
}

// 事件处理函数
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.detail-content {
  padding: 0;
}

.no-data {
  text-align: center;
  padding: 40px 0;
}

.dialog-footer {
  text-align: right;
}

.mt-4 {
  margin-top: 16px;
}
</style>